<template>
  <router-view v-slot="{ Component }">
    <transition name="fade" mode="out-in">
      <component :is="Component" />
    </transition>
  </router-view>
</template>

<script setup>
import { ref, provide } from 'vue';

// 全局状态，用于控制指挥中心全屏模式下侧边栏和标签栏的显示
const isCommandCenterFullscreen = ref(false);

// 提供给子组件的方法
const setCommandCenterFullscreen = (status) => {
  isCommandCenterFullscreen.value = status;
};

// 通过provide提供给子组件
provide('isCommandCenterFullscreen', isCommandCenterFullscreen);
provide('setCommandCenterFullscreen', setCommandCenterFullscreen);
</script>

<style>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

.fade-enter-active, .fade-leave-active {
  transition: opacity 0.3s ease;
}

.fade-enter-from, .fade-leave-to {
  opacity: 0;
}

.el-message {
  min-width: 300px;
}

/* 全屏模式下的样式重置 */
:fullscreen {
  overflow: hidden;
}

:-webkit-full-screen {
  overflow: hidden;
}

:-moz-full-screen {
  overflow: hidden;
}

:-ms-fullscreen {
  overflow: hidden;
}
</style>